<template>
    <require from="./em-blog-content.css"></require>
    <div class="em-blog-content">
        <h1 class="ui dividing header">
		  ${blogInfo.blog.title}
		  <div class="sub header" style="font-size: 12px; position: relative; min-height: 30px; line-height: 30px;">
                <a style="position: absolute; right: 0; top: 0;" class="ui basic label tms-blog-space" href="#/${blogInfo.blog.space.name}/home" show.bind="blogInfo.blog.space.name">${blogInfo.blog.space.name}</a>
                <div class="meta">
                    <i class="history icon"></i> <span class="cinema" title="${blogInfo.blog.creator.username}">${blogInfo.blog.creator.name ? blogInfo.blog.creator.name : blogInfo.blog.creator.username}</span> 发布于 <span class="cinema" title="${blogInfo.blog.createDate | date}">${blogInfo.blog.createDate | timeago}</span>&nbsp;
                    <span> | </span>&nbsp;&nbsp;<i class="unhide icon"></i> <span class="cinema" title="已阅读次数">${blogInfo.blog.readCnt}</span>&nbsp;
                    <span show.bind="blogInfo.blog.tags && blogInfo.blog.tags.length > 0"> | </span>&nbsp;&nbsp;<i class="tags icon" show.bind="blogInfo.blog.tags && blogInfo.blog.tags.length > 0"></i>
                    <div class="ui label" repeat.for="tag of blogInfo.blog.tags">${tag.name}</div>
                    <button class="ui basic green tiny button"
                        click.delegate="pptViewHandler()">阅读模式</button>
                </div>
		  </div>
        </h1>
        <div if.bind="blogInfo.blog.editor == 'Mind'">
            <em-blog-mind blog.bind="blogInfo.blog"></em-blog-mind>
        </div>
        <div if.bind="blogInfo.blog.editor == 'Excel'">
            <em-blog-excel blog.bind="blogInfo.blog"></em-blog-excel>
        </div>
        <div if.bind="blogInfo.blog.editor == 'Sheet'">
            <em-blog-sheet blog.bind="blogInfo.blog"></em-blog-sheet>
        </div>
        <div show.bind="blogInfo.blog.editor != 'Mind' && blogInfo.blog.editor != 'Excel' && blogInfo.blog.editor != 'Sheet'" ref="mkRef" fancybox
            style="margin-top: 32px;"
            class="tms-blog-content markdown-body fr-view" innerhtml.bind="blogInfo.blog.content | parseMd:blogInfo.blog.editor"></div>
        <div class="ui divider" style="margin-top: 32px;"></div>
        <div class="ui basic segment">
            <a show.bind="blogInfo.next" href="#/${sid ? sid + '/' : ''}blog/${blogInfo.next.id}" title="${blogInfo.next.title}" class="ellipsis" style="display: inline-block; max-width: 200px;"><i class="chevron left icon"></i> ${blogInfo.next.title}</a>
            <a show.bind="blogInfo.pre" href="#/${sid ? sid + '/' : ''}blog/${blogInfo.pre.id}" title="${blogInfo.pre.title}" class="ellipsis" style="float: right;"><span class="ellipsis" style="display: inline-block; max-width: 200px; margin-right: 10px;">${blogInfo.pre.title}</span> <i style="float: right;" class="chevron right icon"></i></a>
        </div>
    </div>
</template>
